<template>
  <div class="page project-detail-page">
    <Menu mode="horizontal" active-name="1" @on-select="selectMenu">
      <MenuItem name="project-dashboard">
      <Icon type="ios-paper"></Icon>
      首页
      </MenuItem>
      <MenuItem name="project-interface">
      <Icon type="ios-people"></Icon>
      接口
      </MenuItem>
      <MenuItem name="business">
      <Icon type="ios-people"></Icon>
      业务
      </MenuItem>
      <MenuItem name="settting">
      <Icon type="settings"></Icon>
      设置
      </MenuItem>
    </Menu>
    <div class="content col-span">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    </div>
  </div>
</template>
<script>
  import ProjectDashboard from './project-dashboard.vue'
  import InterfaceCenter from '../interface/interface-center.vue'
  import BusinessCenter from '../business/business-center.vue'
  import ProjectSetting from './project-setting.vue'

  export default {
    meteor: {
      $subscribe: {}
    },
    data () {
      return {
        currentPage: 'dashboard'
      }
    },
    methods: {
      selectMenu (name) {
        this.$router.push({ name })
      }
    },
    mounted () {},
    components: {
      ProjectDashboard,
      InterfaceCenter,
      BusinessCenter,
      ProjectSetting
    }
  }
</script>

<style lang="less" scoped>
  .content {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
  }

</style>
